<template>
    <a-card :bordered="false">

    <!-- 左侧面板 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="12">
          <a-col :md="7" :sm="8">
            <a-form-item label="订单编号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入订单编号" v-model="queryParam.orderNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <a-form-item label="会员昵称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入会员昵称" v-model="queryParam.nickName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <a-form-item label="手机号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入手机号" v-model="queryParam.tel"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <a-form-item label="商品名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入商品名称" v-model="queryParam.productName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <a-form-item label="状态" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-select v-model="queryParam.payStatus" placeholder="请选择" default-value="null" :getPopupContainer="triggerNode => triggerNode.parentNode">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">已完成</a-select-option>
                <a-select-option value="2">已取消</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <a-form-item label="所属门店" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-select v-model="storeId" @change="storeIdChange"  placeholder="请选择" default-value="null" :getPopupContainer="triggerNode => triggerNode.parentNode">
                <a-select-option v-for="(item, index) in departList" :key="index" :value="item.id">
              {{ item.name }}
            </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <a-form-item label="下单时间" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
              <!-- 限制时间两个月内 -->
               <a-range-picker
                format="YYYY-MM-DD"
                @calendarChange="calendarChange"
                :disabled-date="disabledDate"
                v-model="orderDate"
                :placeholder="['开始时间', '结束时间']"
                :allowClear='false'
                @change="changeTime"
              />
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <a-form-item label="分类" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-select v-model="queryParam.type" placeholder="请选择" clear default-value="null" :getPopupContainer="triggerNode => triggerNode.parentNode">
                <a-select-option value="1">立即享用</a-select-option>
                <a-select-option value="2">预约到店</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary"  icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
      <div class="table-operator" style="border-top: 5px">
        <a-button type="primary" icon="download" @click="handleExportXls('订单明细')">导出</a-button>
      </div>
       <a-table
        ref="table"
        rowKey="id"
        :scroll="{x: 1500}"
        size="middle"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="ipagination"
        @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)"><a-icon type="unordered-list"/> 详情</a>
        </span>
      </a-table>
    </div>
    <orderModal ref='modalForm'></orderModal>
  </a-card>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import orderModal from './modules/orderModal'
import { filterObj } from '@/utils/util';
import { getAction } from '@/api/manage'
import moment from 'moment'
export default {
    mixins:[JeecgListMixin],
    components: {orderModal},
    data() {
      return {
        aaa:"",
        ischoose: 1,
        noChoose: 0,
        description: '这是数据字典页面',
        visible: false,
        // 查询条件
        queryParam: {
          createTimeStart: moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'),
          createTimeEnd:  moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD'),
        },
        orderDate:[],
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 120,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '订单编号',
            align: "center",
            dataIndex: 'orderNo',
          },
          {
            title: '会员昵称',
            align: "center",
            dataIndex: 'nickName',
          },
          {
            title: '手机号',
            align: "center",
            dataIndex: 'tel',
          },
          {
            title: '商品名称',
            align: "center",
            dataIndex: 'productName',
          },
          {
            title: '分类',
            align: "center",
            dataIndex: 'typeText',
          },
          {
            title: '规格',
            align: "center",
            dataIndex: 'productSpecifications',
          },
          {
            title: '价格(积分)',
            align: "center",
            dataIndex: 'integral',
          },
          {
            title: '状态',
            align: "center",
            dataIndex: 'payStatusText',
          },
          {
            title: '所属门店',
            align: "center",
            dataIndex: 'storeName',
          },
          {
            title: '下单时间',
            align: "center",
            dataIndex: 'createTime',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
            fixed:'right',
            width:150
          }
        ],
        dict: "",
        labelCol: {
          xs: {span: 8},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 16},
          sm: {span: 19},
        },
        url: {
          list: "/backend/coffee/pageOrderVo",
          delete: "/sys/dict/delete",
          exportXlsUrl: "/backend/coffee/exportOrderVo",
          importExcelUrl: "sys/dict/importExcel",
          refleshCache: "sys/dict/refleshCache",
          queryAllDictItems: "sys/dict/queryAllDictItems",
        },
        departList:[],
        endOpen: false,
        storeId:"",
        startDate:[],
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    watch: {},
    created(){
      this.getOption()
    },
    mounted(){
      this.datemoren()
    },
    methods: {
      datemoren(){
        this.orderDate=[moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'),moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD')]
      },
      storeIdChange(el){
        this.queryParam.storeId=el
      },
      momentTime (time, format) {
        return moment(time, format)
      },
      calendarChange(dates){
        this.startDate = dates;
      },
      disabledDate (current) {
        var current=moment(current)
        if (this.startDate && this.startDate[0]) {
          return (
            current < moment(this.startDate[0]).subtract(60, "days") ||
            current > moment(this.startDate[0]).add(60, "days")
          );
        } else {
          return false;
        }
      },
      //时间点击更改绑定值
      changeTime(time,dateString){
        this.queryParam.createTimeStart=dateString[0]
        this.queryParam.createTimeEnd=dateString[1]
      },
      getQueryParams(){
        var param = Object.assign(this.queryParam);
        param.current = this.ipagination.current;
        param.size = this.ipagination.pageSize;
        return filterObj(param);
      },
      getOption(){
        let url = "/backend/coffee/listStore"
        let params={}
        getAction(url,params).then(res=>{
          if(res.success){
            this.departList=res.data
          }
        })
      },
      //取消选择
      cancelDict() {
        this.dict = "";
        this.visible = false;
        this.loadData();
      },
      // 重置字典类型搜索框的内容
      searchReset() {
        var that = this;
        that.queryParam.orderNo = "";
        that.queryParam.productName = "";
        that.queryParam.payStatus = "";
        that.queryParam.nickName = "";
        that.queryParam.tel = "";
        that.queryParam.type = "";
        this.orderDate=[moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'),moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD')]
        that.queryParam.createTimeStart = moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD');
        that.queryParam.createTimeEnd = moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD');
        that.loadData(this.ipagination.current);
      },
    },
}
</script>